<!--
所需数据：
// 景区名称
data:['景区1','景区2','景区3','景区3','景区4']
// 日期
data : ['周一','周二','周三','周四','周五','周六','周日']
// 客流量
data:[120, 132, 101, 134, 90, 230, 210]
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日客流总量对比</title>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.1.1.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>

</head>
<body>
<div id="chart" style="width: 800px;height:600px;"></div>

<script>
    // JS
    var chart = echarts.init(document.getElementById('chart'));
    option = {
        title: {
            text: '日客流总量对比'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            // 景区名称
            data:['景区1','景区2','景区3','景区3','景区4']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                // 日期
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'景区1',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                // 客流量
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'景区2',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'景区3',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'景区4',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'景区5',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    chart.setOption(option);
</script>

</body>
</html>